<!DOCTYPE html>
<html xmlns:wb="http://open.weibo.com/wb">
    <head>
        <meta charset="UTF-8" />
        <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
        <title>thin.js</title>
        <link rel="stylesheet" href="https://com.wf.pub/thin.css" />
        <style>
            label {
                width: auto;
            }
        </style>
    </head>

    <body>
        <div class="test_container"></div>
        <script src="https://com.wf.pub/jquery.js"></script>
        <script src="https://com.wf.pub/thin.js"></script>
        <!-- <script src="thin.js"></script> -->

        <script>
            var data = {
                name: 'wanfang',
                age: '20',
                sex: 'woman'
            };
            $('.test_container').render({
                data: data,
                template: {
                    e: 'form',
                    t: [
                        {
                            e: 'label',
                            t: [
                                '姓名：',
                                {
                                    e: 'input',
                                    a: {
                                        name: 'name',
                                        type: 'text'
                                    },
                                    value: '[[name]]'
                                }
                            ]
                        },
                        {
                            e: 'label',
                            t: [
                                '年龄：',
                                {
                                    e: 'input',
                                    a: {
                                        name: 'age',
                                        type: 'text'
                                    },
                                    value: '[[age]]'
                                }
                            ]
                        },
                        {
                            e: 'label',
                            t: [
                                '性别：',
                                {
                                    e: 'select',
                                    a: {
                                        name: 'sex'
                                    },
                                    options: {
                                        男: 'man',
                                        女: 'woman'
                                    },
                                    // t: [
                                    //     '<option value="man">男</option>',
                                    //     '<option value="woman">女</option>'
                                    // ],
                                    // selected: '[[sex]]'
                                    value: '[[sex]]'
                                }
                            ]
                        },
                        {
                            e: 'button',
                            a: {
                                type: 'button'
                            },
                            t: '提交',
                            click: function (param) {
                                //因为click事件经常使用，所以不用放在event对象中
                                console.log(param);
                                // 如果改变了输入框的值，此时打印org_data为输入框最新的值。说明bind产生效果，改变了原有的data_of_thin
                            }
                        }
                    ]
                }
            });
        </script>
    </body>
</html>
